<template>
  <common-edit-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="close('onlyClose')"
    @submit="submitForm"
    :button-loading="isPersistenceLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      @submit.native.prevent
    >
      <el-row :gutter="18">
        <el-col :span="24">
          <el-form-item label="数据名称" prop="dictLabel">
            <common-input
              v-model="form.dictLabel"
              placeholder="请输入数据名称"
              :maxlength="32"
              :disabled="
                isroles && form.dictType === 'NETWORK_AREA_'
                  ? false
                  : true && dialogTitle === '编辑字典数据'
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="数据类型" prop="dictType">
            <!-- <common-input v-model="form.dictName" placeholder="请选择数据类型" :disabled="form.id ? true : false" /> -->
            <el-select
              v-model="form.dictType"
              placeholder="请选择数据类型"
              filterable
              clearable
              :disabled="dialogTitle === '编辑字典数据'"
            >
              <el-option
                v-for="(item, index) in getOption"
                :key="item.dictType"
                :label="item.dictName"
                :value="item.dictType"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容" prop="dictValue">
            <common-input
              :value="form.dictValue"
              :type="'textarea'"
              :verify="false"
              @input="input"
              @change="change"
            ></common-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <common-input
              type="textarea"
              v-model="form.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import {
  dict_data_edit,
  dicAddData,
} from "@/api/management/configure/index.js";
import { encode } from "@/utils/aesUtils";

export default {
  isPersistenceLoading: false,
  components: {},
  props: {
    optionDicArr: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    getOption() {
      if (this.dialogTitle === "新增字典数据") {
        return this.optionDicArr.reduce((r, c) => {
          if (
            c.dictType === "ALARM_MOULD_" ||
            c.dictType === "SYS_INSPECTION_HOSTNAME_"
          ) {
            r.push(c);
          }
          return r;
        }, []);
      } else {
        return this.optionDicArr;
      }
    },
  },
  data() {
    return {
      isroles: false,
      isPersistenceLoading: false,
      dialogTitle: "编辑", // 标题
      dialogShow: false, // 是否显示
      form: {
        dictValue: "",
        dictType: "",
      },
      rules: {
        dictLabel: [
          {
            required: true,
            message: "请输入数据名称",
            trigger: "blur",
          },
        ],
        dictValue: [
          {
            required: true,
            message: "请输入内容",
          },
        ],
        dictType: [
          {
            required: true,
            message: "请输入数据类型",
            trigger: "blur",
          },
        ],
      },
      showPwd: false,
      isRule: true,
    };
  },
  methods: {
    /**
     * 关闭
     */
    close(onlyClose) {
      this.$refs.form.resetFields();
      this.dialogShow = false;
      if (!onlyClose) {
        this.$emit("refresh");
      }
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogTitle = data.id ? "编辑字典数据" : "新增字典数据";
      this.showPwd = !!(data.id && (data.id === "30" || data.id === "94"));
      this.isRule = !!(data.id && (data.id === "30" || data.id === "94"));
      this.dialogShow = true;
      this.form = data.id ? data : this.$options.data().form;
      if (!data.id) this.form.dictType = "SYS_INSPECTION_HOSTNAME_";
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.form);
          // if(this.showPwd) {
          //   if(params.dictValue) {
          //     params.dictValue = encode(params.dictValue)
          //   }else {
          //     delete params.dictValue
          //   }
          // }
          if (this.form.id) {
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true;
              dict_data_edit(params)
                .then((res) => {
                  if (res && res.code === 200) {
                    this.$GlobalSuccessMessage("编辑成功");
                    this.close();
                  } else {
                    this.$GlobalErrorConfirm("编辑失败", res.msg);
                  }
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                });
            }
          } else {
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true;
              dicAddData(params)
                .then((res) => {
                  if (res && res.code === 200) {
                    this.$GlobalSuccessMessage("新增成功");
                    this.close();
                  } else {
                    this.$GlobalErrorConfirm("新增失败", res.msg);
                  }
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                });
            }
          }
        }
      });
    },
    input(val) {
      // this.form.dictValue = this.showPwd ? encode(val) : val
      this.form.dictValue = val;
    },
    change(val) {
      // this.isRule = val;
    },
    isRoles() {
      this.isroles = this.$store.getters.roles.every(
        (item) => item == "superadmin"
      );
    },
  },
  created() {},
  mounted() {
    this.isRoles();
  },
};
</script>
<style lang="scss" scoped></style>
